<template>
	<view>
		<view v-if="userInfo !=''" class="content">
		<!-- 	<view class="userimg nickName">
				<image :src="userInfo.avatarUrl" mode=""></image>
			</view>
			<view class="userinfo">
				{{userInfo.nickName}}
			</view> -->
			<view class="content-item">
				<image src="../../static/static/my-beijing.png" mode="" style="width: 710rpx; border-radius: 10rpx;"></image>
				<view class="user-info">
					<view class="touxiang">
						<image :src="userInfo.avatarUrl"  style="height: 60px;width: 60px;"></image>
					</view>
					<view class="name">
						<text>{{userInfo.nickName}}</text>
					</view>
				</view>
			</view>


			<view class="content-item">
				<view class="content-show">
					<view class="money-item">
						<text>
							￥128
						</text>
						<text style="font-size: 12px;color: #919293;">
							余额
						</text>
					</view>
					<view class="money-item">
						<text>
							0
						</text>
						<text style="font-size: 12px;color: #919293;">
							优惠券
						</text>
					</view>
					<view class="money-item">
						<text>
							10
						</text>
						<text style="font-size: 12px;color: #919293;">
							积分
						</text>
					</view>
				</view>

			</view>
			<view class="content-item">
				<view class="title">
					<text>我的订单</text>
				</view>
				<view class="content-show">
					<view class="order-tab">
						<uni-icons type="bars" size="30" color="#97AF13">12</uni-icons>
						<text class="order-title">待支付</text>
					</view>
					<view class="order-tab">
						<uni-icons type="loop" size="30" color="#97AF13">22</uni-icons>
						<text class="order-title">待配送</text>
					</view>

					<view class="order-tab">
						<uni-icons type="reload" size="30" color="#97AF13">34</uni-icons>
						<text class="order-title">配送中</text>
					</view>
					<view class="order-tab">
						<uni-icons type="shop" size="30" color="#97AF13">54</uni-icons>
						<text class="order-title">已完成</text>
					</view>
					<view class="order-tab">
						<uni-icons type="person" size="30" color="#97AF13">56</uni-icons>
						<text class="order-title">已取消</text>
					</view>
				</view>
			</view>
			<view class="content-item">
				<view class="title">
					<text>我的服务</text>
				</view>
				<view class="content-show">
					<view class="service-item">
						<uni-icons type="person" size="35" color="#97AF13">111</uni-icons>
						<text class="service-text">我的资料</text>
					</view>
					<view class="service-item">
						<uni-icons type="location" size="35" color="#97AF13">231</uni-icons>
						<text class="service-text">收货地址</text>
					</view>
					<view class="service-item">
						<uni-icons type="chat" size="35" color="#97AF13">235</uni-icons>
						<text class="service-text">帮助与客服</text>
					</view>
					<view class="service-item">
						<uni-icons type="gear" size="35" color="#97AF13">265</uni-icons>
						<text class="service-text">设置</text>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="userinfo">
			<view class="userimg nickName">
				<image src="https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132"
				 mode=""></image>
			</view>
			<view class="userinfo">
				微信用户
			</view>
			<button open-type="getUserInfo" @getuserinfo="onGotUserInfo">点击登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: []
			}
		},
		onLoad() {
			this.changeLogin();
		},
		methods: {
			changeLogin() {
				// 授权
				// 获取用户详细信息, 可以获取到说明已经授权过, 直接拿到用户信息
				uni.getUserInfo({
					provider: 'weixin',
					//授权成功的回调
					success(res) {
						console.log(res)
					},
					//第一次进入小程序
					fail() {
						uni.showToast({
							title: '请点击授权进行登录',
							icon: 'none'
						});
					}
				});
			},

			/**
			 * 用户同意授权个人微信信息
			 * @param {Object} e 用户的信息
			 */
			onGotUserInfo(e) {
				console.log(e)
				var that = this
				that.userInfo = e.detail.userInfo
				console.info(e.detail.userInfo)
			}


		}
	}
</script>

<style>
	.container {
		width: 100%;
	}
	
	.profile {
		width: 100%;
	}
	.img {
		border-radius: 50px;
	}

	.user-info {
		position: absolute;
		top: 100px;
		left: 30px;
		display: flex;
		align-items: center;

	}

	.user-info .name {
		display: flex;
	}

	.content-item {
		display: flex;
		margin: 10px;
		flex-direction: column;
		border-radius: 4px;
		background-color: #FFFFFF;
		justify-content: space-around;
	}

	.content-item .title {
		padding: 15px;
		color: #5A5B5C;
		font-size: 16px;
		font-weight: bold;
	}

	.content-show {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}

	.money-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px;
	}

	.service-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px;
	}

	.service-item .service-text {
		font-size: 12px;
		color: #919293;
	}

	.order-tab {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 15px;
	}

	.order-title {
		font-size: 14px;
		padding-top: 10px;
		color: #919293;
		width: 84rpx;
		text-align: center;
		padding-bottom: 8px;
	}






	page {
		background-color: #f4f3f3;
	}

	.content {
		display: flex;
		flex-direction: column;
		background-color: #31A3FB;
	}

	.userinfo {
		background-color: #31A3FB;
		width: 100%;
		align-items: center;
		text-align: center;
		padding-top: 60rpx;
		padding-bottom: 60rpx;
	}

	.userimg {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		overflow: hidden;
		margin: 0 auto;
	}

	.userimg image {
		width: 150rpx;
		height: 150rpx;
		display: inline-block;
	}

	.nickName {
		font-size: 35rpx;
		color: #FFFFFF;
		margin-top: 20rpx;
	}

	.userinfo button {
		width: 200rpx;
		height: 80rpx;
		margin: 0 auto;
		font-size: 35rpx;
	}
</style>
